@{repository.loading = true}

<h1><i class="fa fa-shopping-cart"></i>@{title}</h1>

<div class="hidden" data-b="shoppingcart.items" data-b-visible="!value || !value.length">
	<br />
	<div class="empty">
		@(Your shopping cart is empty, <b>try to visit this page later.</b>)
	</div>
	<br />
</div>

<div class="row hidden" data-b="shoppingcart.items" data-b-visible="value && value.length > 0">
	<div class="col-md-5 m col-md-push-7">
		<div class="caption">@(Your shopping cart)</div>
		<div data-jc="checkout" data-currency="@{global.config.currency_entity}">
			<script type="text/html">
				<div class="checkout-container">
					<div class="name"><i class="fa fa-times-circle"></i><b>...</b></div>
					<div class="variant"></div>
					<div class="checkout-controls">
						<div class="sum">..</div>
						<div class="count"><input type="text" maxlength="2" /></div>
						<div class="price">/ @(1 piece =) <span>...</span></div>
						<div class="stock">@(In stock:) <b>...</b></div>
					</div>
				</div>
			</script>
		</div>
	</div>
	<div class="col-md-7 m col-md-pull-5">
		<div class="content">
			<div class="contentbody">
				<div class="row">
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.firstname" data-jc-config="required:true;maxlength:40">@(First name)</div>
					</div>
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.lastname" data-jc-config="required:true;maxlength:40">@(Last name)</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.email" data-jc-config="required:true;type:email;maxlength:120" data-jc-value="'@'">@(Email address)</div>
					</div>
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.phone" data-jc-config="required:true;type:phone;placeholder:@(International format);maxlength:25">@(Phone number)</div>
					</div>
				</div>
			</div>
			<hr class="nmt nmb" />
			<div class="contentbody">
				<div class="caption"><i class="fa fa-address-card"></i>@(Billing address)</div>
				<div class="row">
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.billingstreet" data-jc-config="required:true;maxlength:50">@(Street)</div>
					</div>
					<div class="col-md-3 m">
						<div data-jc="textbox" data-jc-path="order.form.billingzip" data-jc-config="required:true;type:zip;align:center">@(ZIP)</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.billingcity" data-jc-config="required:true;maxlength:50">@(City)</div>
					</div>
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.billingcountry" data-jc-config="required:true;maxlength:50">@(Country)</div>
					</div>
				</div>
				<div data-jc="checkbox" data-jc-path="order.form.iscompany">@(Billing to company)</div>
			</div>
			<div  data-b="order.form.iscompany" data-b-visible="value === true" class="hidden contentbody bg-yellow">
				<div data-jc="textbox" data-jc-path="order.form.company" data-jc-config="maxlength:40;required:true" class="m">@(Company name)</div>
				<div class="row">
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.companyid" data-jc-config="maxlength:15;required:true">@(Company ID)</div>
					</div>
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.companyvat" data-jc-config="maxlength:30;required:true">@(VAT number)</div>
					</div>
				</div>
			</div>
			<hr class="nmt nmb" />
			<div class="contentbody">
				<div data-jc="dropdown" data-jc-path="order.form.delivery" data-jc-config="icon:truck;required:true;datasource:order.dependencies.deliverytypes;empty:">@(Delivery)</div>
				<div class="help m">@(Please choose a type of delivery.)</div>
				<div data-jc="dropdown" data-jc-path="order.form.payment" data-jc-config="icon:credit-card;required:true;datasource:order.dependencies.paymenttypes;empty:">@(Payment)</div>
				<div class="help">@(Please choose a type of payment.)</div>
			</div>
			<div class="contentbody bg-yellow">
				<div class="caption"><i class="fa fa-address-card"></i>@(Delivery address)</div>

				<div class="row">
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.deliveryfirstname" data-jc-config="required:true;maxlength:40">@(First name)</div>
					</div>
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.deliverylastname" data-jc-config="required:true;maxlenght:40">@(Last name)</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.deliveryphone" data-jc-config="required:true;type:phone;placeholder:@(International format);maxlength:25">@(Phone number)</div>
						<div class="help">@(This phone number is for courier.)</div>
					</div>
					<div class="col-md-6" style="margin-top:10px">
						<br class="hidden-xs" />
						<a href="javascript:void(0)" class="copy exec" data-exec="ordercopypersonal"><i class="fa fa-copy"></i>@(Copy same data as above)</a>
					</div>
				</div>
			</div>
			<hr class="nmt nmb" style="border-color:#DDDC9F" />
			<div class="contentbody bg-yellow">
				<div class="row">
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.deliverystreet" data-jc-config="required:true;maxlength:50">@(Street)</div>
					</div>
					<div class="col-md-3 m">
						<div data-jc="textbox" data-jc-path="order.form.deliveryzip" data-jc-config="required:true;type:zip;align:center">@(ZIP)</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.deliverycity" data-jc-config="required:true;maxlength:50">@(City)</div>
					</div>
					<div class="col-md-6 m">
						<div data-jc="textbox" data-jc-path="order.form.deliverycountry" data-jc-config="required:true;maxlength:50">@(Country)</div>
					</div>
				</div>
				<a href="javascript:void(0)" class="copy exec" data-exec="ordercopyaddress"><i class="fa fa-copy"></i>@(Copy from billing address)</a>
			</div>
			<div class="contentbody">
				<div data-jc="textarea" data-jc-path="order.form.note" class="m">@(Note)</div>
				<div data-jc="checkbox" data-jc-path="order.form.isnewsletter" data-jc-value="true">@(I want to be notified about discounts and news)</div>
				<div data-jc="checkbox" data-jc-path="order.form.isterms" class="m b red">@(I agree with terms and conditions)</div>
				<div data-jc="error" data-jc-path="order.form.response"></div>
				<div data-jc="validation" data-jc-path="order.form" data-jc-config="flags:visible">
					<button class="button b exec" data-exec="ordersubmit" name="submit" disabled="disabled"><i class="fa fa-send"></i>@(Submit order)</button>
				</div>
			</div>
		</div>
	</div>
</div>

<script>

	SETTER(true, 'loading', 'hide', 500);

	var order = {};

	ON('@shoppingcart', function(com) {
		var data = com.get();

		if (!data || !data.items.length)
			return;

		// Reads types of delivery and payment
		AJAX('GET /api/orders/dependencies/', 'order.dependencies');

		// Performs autofill if the user is logged
		MAIN.cookies.get('__user') && AJAX('GET /api/account/autofill/', function(response) {
			EXTEND('order.form', response);
		});

		// Get current prices according to the database
		// A check for price hijacking
		com.sync(function(arr, data) {
			AJAX('GET /api/products/prices/?id=' + arr.join(','), com.modify);
		});
	});

	COMPONENT('checkout', function(self, config) {

		var currency = '';
		var skip = false;
		var container, summarize;

		self.readonly();
		self.blind();

		self.make = function() {

			var el = self.find('script');

			self.template = VIRTUALIZE(el.html(), { name: '.name b', count: 'input', price: '.price span', variant: '.variant', sum: '.sum', stock: '.stock b' });
			currency = self.attrd('currency') || '{0}';

			self.html('<div class="checkout"></div><div class="checkout-summarize"><b></b></div>');
			container = self.find('.checkout');
			summarize = self.find('.checkout-summarize b');

			self.event('click', '.fa-times-circle', function() {
				var ccontainer = $(this).closest('.checkout-container');
				skip = true;
				FIND('shoppingcart').rem(ccontainer.attrd('token'));
				ccontainer.remove();
			});

			self.event('input', 'input', function() {
				setTimeout2(self.id, function(input) {
					skip = true;
					var count = input.value.parseInt();
					var ccontainer = $(input).closest('.checkout-container');
					var shoppingcart = FIND('shoppingcart');
					var product = shoppingcart.read(ccontainer.attrd('token'));
					var item = ccontainer.get(0).$item;
					count = shoppingcart.upd(product.token, count);
					item.sum.html(currency.format((count * product.sum).format(2)));
					input.value = count;
				}, 500, 10, this);
			});

			self.on('shoppingcart.sum', function(data) {
				summarize.html(currency.format(data.sum.format(2)));
				!skip && self.render();
			});
		};

		self.render = function() {
			FIND('shoppingcart', function(com) {
				container.empty();
				com.items().forEach(function(item) {
					var obj = self.template.clone();
					obj.attrd('token', item.token);
					obj.name.html(item.name);
					item.variant && obj.variant.html(item.variant);
					obj.count.val(item.count);
					obj.price.html(currency.format(item.sum.format(2)));
					obj.sum.html(currency.format((item.count * item.sum).format(2)));

					if (item.stock)
						obj.stock.html(item.stock).rclass('red');
					else
						obj.stock.html('@(out of stock)').aclass('red');

					// a hidden reference to this virtualized instance
					obj.element.get(0).$item = obj;
					container.append(obj.element);
				});
			});
		};
	});

	function ordersubmit() {

		var shoppingcart = FIND('shoppingcart');
		if (shoppingcart.price === 0) {
			// error
			return;
		}

		// Removes products with zero count
		shoppingcart.clean();
		order.form.items = shoppingcart.get().items;
		SETTER('loading', 'show');

		AJAX('POST /api/orders/create/', order.form, function(response) {

			SETTER('loading', 'hide', 1000);

			if (response.success) {
				shoppingcart.clear();
				setTimeout(function() {
					location.href = '@{sitemap_url('order', '{0}')}'.format(response.value);
				}, 1000);
			} else {
				RESET('order.form.*');
				SET('order.form.response', response);
			}

		});
	}

	function ordercopyaddress() {
		SET('order.form.deliverystreet', order.form.billingstreet, true);
		SET('order.form.deliverycity', order.form.billingcity, true);
		SET('order.form.deliveryzip', order.form.billingzip, true);
		SET('order.form.deliverycountry', order.form.billingcountry, true);
	}

	function ordercopypersonal() {
		SET('order.form.deliveryfirstname', order.form.firstname, true);
		SET('order.form.deliverylastname', order.form.lastname, true);
		SET('order.form.deliveryphone', order.form.phone, true);
	}

</script>